/* myCourse_package/pages/CourseIntroduction/CourseIntroduction.wxss */
.CourseIntroduction{
  padding:30rpx 46rpx;
  .course_banner{
    width: 100%;
    height: 376rpx;
    border-radius: 10rpx;
    box-shadow: 0rpx 1rpx 10rpx 5rpx rgba(0,0,0,.3);
    image{
      width: 100%;
      height: 100%;
    }
  }

  .detail_introduce{
    padding: 28rpx 0;
    border-bottom: 2rpx solid #E6E6E6;
  .detail_items{
    margin-bottom: 10rpx;
    font-size: 32rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #E6E6E6;
    text{
      color:#999999;
    }
  }
  .priceWrap{
    display: flex;
    .priceWrap_left{
      display: flex;
      align-items: center;
      .discount{
        color: red;
        font-size: 32rpx;
        margin-right: 10rpx;
      }
      .price{
        position: relative;
        font-size: 24rpx;
        color:#999999d8 ;
        &::after{
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 100%;
          height: 1rpx;
          background-color: #999999;
        }
      }
    }
  }
 .detail_introduce_title{
   font-weight: 400;
 font-size: 32rpx;
 color: #333333;
 display: flex;
 justify-content: flex-end; 
 
 .share{
   display: flex;
   align-items: center;
   margin: 0;
   font-size: 32rpx;
   background-color: transparent;
   height: 30rpx;
   &::after{
     border:none ;
   }
   image{
     width: 32rpx;
     height: 30rpx;
     margin-right: 24rpx;
   }
 }
    }

    .detail_introduce_content{
    overflow: hidden;
     font-weight: 400;
     font-size: 28rpx;
     color: #999999;
     line-height: 44rpx;
    }
  }
  .courseInstallment{
    margin-top: 28rpx;
  }
  .Renewal_course{
    margin-top: 80rpx;
    text-align: center;
   line-height: 96rpx;
   height: 96rpx;
   background: linear-gradient( 180deg, #FEE626 0%, #FFC300 100%);
   border-radius: 48rpx;
   font-weight: 400;
 font-size: 32rpx;
 color: #333333;
  }
  .courseTimeList{
    height: 252rpx;
  }
  .courseInstallment{
    .courseInstallment_title{
      margin-bottom: 28rpx;

    }
    .courseInstallment_list{
      .courseCard{
        margin-bottom: 28rpx;
        height: 336rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 6rpx 16rpx -2rpx rgba(53,40,73,0.05), 0rpx 0rpx 2rpx 0rpx rgba(13,12,75,0.24), 0rpx 6rpx 16rpx -2rpx rgba(53,40,73,0.05), 0rpx 0rpx 2rpx 0rpx rgba(13,12,75,0.24);
        border-radius: 32rpx;
        padding: 20rpx 30rpx;
        .courseCard_title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 14rpx;
          border-bottom: 2rpx solid #E6E6E6;
          view{
            &:first-child{
              font-weight: 500;
              font-size: 30rpx;
              color: #010001;
            }
            &:last-child{
              font-weight: 300;
              font-size: 20rpx;
              color: #767676;
            }
          }
        }
        .course_content{
          margin-top: 32rpx;
          display: flex;
          align-items: flex-end;
          .course_cover{
            width: 206rpx;
            height: 172rpx;
            margin-right: 28rpx;
          }
          .course_detail{
            flex-grow: 1;
         .course_detail_teacher{
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
          line-height: 48rpx;
          text-shadow: 0px 6px 16px rgba(53,40,73,0.05), 0px 0px 2px rgba(13,12,75,0.24);
          white-space: nowrap;
          overflow: hidden;
          width: 300rpx;
         }
         .course_detail_time{
           margin: 12rpx 0 32rpx 0;
           display: flex;
           align-items: center;
          font-weight: 500;
          font-size: 24rpx;
          color: #767676;
          line-height: 32rpx;
          text-shadow: 0px 6px 16px rgba(53,40,73,0.05), 0px 0px 2px rgba(13,12,75,0.24);
          image{
            width: 24rpx;
            height: 24rpx;
            margin-right: 4rpx;
          }
         }
         .course_detail_money{
           display: flex;
           align-items: flex-end;
           color: #FE0101;
          view{
            &:first-child{
             font-size: 20rpx;
            }
            &:last-child{
              font-size: 32rpx;
            }
          }
         }
          }
        }
        .courser_radio{
          image{
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
    }
  }
  .purchase{
    margin-top:100rpx;
    display: flex;
    justify-content: center;
    .purchase_btn{
      width: 200px;
      height: 96rpx;
      text-align: center;
      line-height: 96rpx;
      border-radius: 20rpx;
      font-size: 32rpx;
      background: linear-gradient( 180deg, #FFE730 0%, #FFC603 100%);
    }
  }
 }